<script setup>
//导入接口
import { addApi,initApi,editApi,delApi,isUsedApi,init1Api,saveConfigApi} from '@/api/main'
import { ref } from 'vue'
import {ElMessage} from "element-plus";

const title1 = ref('')
const init1 = () => {
  init1Api().then(res => {
    title1.value = res.data.data.dict[0].title; // 获取返回的数据数组
    console.log(title1.value)
  })
}

init1();

const input = ref({title:'',content:''})

const dictList = ref([]); // 定义一个响应式数组用于存储字典数据
const config = ref({
  mod:2,
  per_second:2,
  black_second: 30,
  font_size: 20,
  times: 1
})

//初始化方法
const init = () => {
  initApi().then(res => {
    const dataList = res.data.data; // 获取返回的数据数组

    // 遍历处理每个数据项
    const processedList = dataList.dict.map(item => ({
      id:item.id,
      title: item.title,
      originContent: item.content,
      content: splitContent(item.content),
    }));

    dictList.value = processedList; // 更新字典数据列表
    config.value = dataList.config
  })
}

// 分割 content 字段函数，处理英文逗号和中文逗号
const splitContent = (content) => {
  // 匹配英文逗号和中文逗号进行分割
  const contentArray = content.split(/[,\s，\s]+/);
  return contentArray;
};

init()

//新增方法
const handleSubmit = () => {
  const data = {
    title: input.value.title,
    content: input.value.content,
  }
  addApi(data).then(res => {
    console.log(res)
    ElMessage({
      message: '操作成功',
      type: 'success',
      duration: 3000 // 持续时间（毫秒），默认为3000
    });
    init()
    //清空input
    input.value.title = ''
    input.value.content = ''

  })
}
//使用方法
const use = (id) =>{
  const data = {
    id:id,
  }
  isUsedApi(data).then(res => {
    console.log(res)
    ElMessage({
      message: '操作成功',
      type: 'success',
      duration: 3000 // 持续时间（毫秒），默认为3000
    });
    init()
    init1();
  })
}

//保存方法
const save=(id,index)=>{
  //调用编辑接口
  const data = {
    id:id,
    title: dictList.value[index].title,
    content: dictList.value[index].originContent,
  }
  console.log(data);
  editApi(data).then(res => {
    console.log(res)
    ElMessage({
      message: '操作成功',
      type: 'success',
      duration: 3000 // 持续时间（毫秒），默认为3000
    });
    init()
  })
}


const del = (id) =>{
  //调用删除接口
  const data = {
    id:id,
  }
  delApi(data).then(res => {
    console.log(res)
    ElMessage({
      message: '操作成功',
      type: 'success',
      duration: 3000 // 持续时间（毫秒），默认为3000
    });
    init()
  })
}

const isUse = ref(true);
const content = ref([])

//测试按钮
const test=(index)=>{
  // isUse.value = false;
  // content.value = dictList.value[index].content
  // console.log(content.value)
  window.open("/#/home")
}

const saveConfig = ()=>{
  let param = {
    mod: config.value.mod,
    per_second: config.value.per_second,
    black_second: config.value.black_second,
    font_size: config.value.font_size,
    times: config.value.times
  }
  console.log(param)
  saveConfigApi(param).then((res)=>{
    ElMessage.success('操作成功')
    init()
  })
}
</script>

<template>
<div style="padding: 5px">
  <div class="top">
    <el-row>
      <el-col :span="3">
        <div>
          <h1>词语设置</h1>
          <small>当前使用的标题是：{{title1}}</small>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="slider-demo-block">
          <span class="demonstration">显示模式</span>
          <div style="display: flex;margin-right: 20px">
            <el-radio-group @change="saveConfig" v-model="config.mod" size="small">
              <el-radio-button label="白底黑字" :value="1" />
              <el-radio-button label="黑底白字" :value="2" />
            </el-radio-group>
          </div>
        </div>
      </el-col>
      <el-col :span="3">

        <div class="slider-demo-block">
          <span class="demonstration">播放次数</span>
          <div style="display: flex;margin-right: 20px">
            <el-input-number :min="1" :max="10" v-model="config.times" @change="saveConfig"/>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="slider-demo-block">
          <span class="demonstration">单词大小</span>
          <div style="display: flex;margin-right: 20px">
            <div style="margin-right: 20px">100</div>
            <el-slider @change="saveConfig" v-model="config.font_size" :max="450" :min="100"/>
            <div style="margin-left: 10px">450px</div>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="slider-demo-block">
          <span class="demonstration">单词显示的时间</span>
          <div style="display: flex;margin-right: 20px">
            <div style="margin-right: 20px">2</div>
            <el-slider @change="saveConfig" v-model="config.per_second" :max="10" :min="2"/>
            <div style="margin-left: 10px">10s</div>
          </div>
        </div>
      </el-col>
      <el-col :span="7">

        <div class="slider-demo-block">
          <span class="demonstration">回忆时间</span>
          <div style="display: flex;margin-right: 20px">
            <div style="margin-right: 20px">0</div>
            <el-slider @change="saveConfig" v-model="config.black_second" :min="0" :max="120" />
            <div style="margin-left: 10px">120s</div>
          </div>
        </div>
      </el-col>
    </el-row>


  </div>
  <div class="box">
    <el-card style="max-width: 480px;margin-bottom: 20px;">
      <template #header>
        <div class="card-header">
          标题：
          <span><el-input v-model="input.title" style="width: 240px" placeholder="标题不可重复" /></span>
        </div>
      </template>
      <el-form>
        <el-form-item label="词语:">
          <el-input v-model="input.content" type="textarea" :rows="6" placeholder="多个词语以逗号隔开" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button size="small" type="success" @click="handleSubmit">新增</el-button>
      </template>
    </el-card>

    <el-card style="min-width: 250px;margin-left: 20px;margin-bottom: 20px;" v-for="(item,index) in dictList" :key="index">
      <template #header>
        <div class="card-header">
          <el-input v-model="dictList[index].title"/>
        </div>
      </template>
      <el-input type="textarea" :rows="6" v-model="dictList[index].originContent">
      </el-input>
      <template #footer>
        <el-button size="small" type="success" @click="save(item.id,index)">保存</el-button>
        <el-button size="small" type="primary" @click="use(item.id)">使用</el-button>
        <el-button size="small" type="primary" @click="test(index)">测试</el-button>
        <el-button size="small" type="danger" @click="del(item.id)">删除</el-button>
      </template>
    </el-card>
  </div>
</div>
</template>

<style scoped lang="less">
.box{
  width: 100%;
 display: flex;
flex-wrap: wrap;
}
.top{
  width: 100%;
  //display: flex;
  //justify-content: space-around;
  .slider-demo-block{
    //margin-left: 20px;
    //min-width: 200px;
  }

}
.used{
  background-color: black;
  width: 100%;
  height: 95vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .word{
    color: white;
    font-size: 50px;

  }
}
</style>